<template>
  <div class="home_btn">
      <div class="H_nav">
        <div class="H_left" @click="gogo"><</div>
        <div class="H_center">414洋酒会场 轩尼诗VSOP低至336元</div>
        
          <div class="H_right" @click="toggle">...</div>
         
        
         
      </div>
    <div class="drop-down">
          <ul>
            <li>首页</li>
            <li>分类搜索</li>
            <li>购物车</li>
            <li>我的</li>
          </ul>
    </div>
    <div><img src="http://img1.wangjiu.com/png/20170411/default/1491890619061383"></div>
  
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491890668611955"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491890695685094"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491890760694790"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491890790178260"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491890848987886"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491891167126683"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491891528200898"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491891551895460"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491891587199854"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491891620883343"></div>
   <div><img src="http://img3.wangjiu.com/png/20170411/default/1491891644666531"></div>
    <div><img src="http://img3.wangjiu.com/png/20170411/default/1491891680053617"></div>

  <div class="H_gain" v-for="item in arr">

    <div class="H_gain_img"><img :src="item.img"></div>
    <div class="H_gain_txt">
      <div class="H_gain_top">{{item.title}}</div>
      <div class="H_dow_zon">
        <div class="H_gain_dow">￥325.<span class="xx">00</span></div>
        <div class="buy">立即购买</div>
      </div>
    </div>
  </div>
  <div><img src="http://m.wangjiu.com/activity/2015/images/04_414/btn-03-02.png"></div>
   </div>
</template>

<script>
export default {
  name: 'home_btn',
  data () {
    return {
      msg: 'home_btn',
      arr:[]

    }
  },
  created:function(){
    //
    $(".vv").css("display","none");
    $("footer").css("display","none");

    var that = this;
    $.get('http://www.beautifulmelody.top/yangjiu.php?uname=&pwd=&type=%E6%89%80%E6%9C%89',function(data){
      that.arr = JSON.parse(data).data;
      
    })
    // console.log(that);
  },
  methods:{
    gogo:function(){
      window.history.back();
    },
    toggle:function(){
      $(".drop-down").toggle();
    }
  },
  destroyed:function(){
    $(".vv").css("display","block");
    $("footer").css("display","block");
  }
}





</script>
<style scoped>
*{
  margin: 0;padding: 0;
}

.H_nav{
  font-size: 0.4rem;height: 0.9rem;overflow: hidden;
}
.H_nav div{
  margin-top: 0.1rem;
}
.H_left{
  float: left;text-align: center;margin-left: 0.3rem;
}
.H_center{
  float: left;text-align: center;margin-left: 0.7rem;
}
.H_right{
  float: right;font-size: 0.5rem;text-align: center;line-height: 0.5rem; margin-right: 0.3rem;
}
.drop-down li{
  font-size: 0.4rem;width: 2.5rem;height: 0.8rem;border: 1px solid #ccc;text-align: center;line-height: 0.8rem;
  color: white;background: black;opacity: 0.8;
}
.home_btn{
  position: relative;
}
.drop-down{
  position: absolute;right: 0;z-index: 99;display: none;
}
img{
  width: 100%;
}
.H_gain_img{
  width:4.5rem;height: 4rem;
  margin-top: 0.2rem;margin-bottom: 0.4rem;float: left;
}
.H_gain_txt{
  overflow: hidden;
  float: left;width: 5rem;height: 4rem;
  font-size: 0.4rem; margin-top: 0.2rem;margin-bottom: 0.4rem;
}
.H_gain_top{
  margin-bottom: 2.1rem;height: 1.2rem;
}
.H_dow_zon{
  overflow: hidden;
}
.H_gain_dow{
  float: left; color: red
}
.xx{
  font-size: 0.35rem;
}
.buy{
  float: right;width: 2rem;border: 1px solid red;height: 0.6rem;text-align: center;line-height: 0.6rem;border-radius:0.1rem;background: red;
}
</style>

